<template>
    <div>
        <el-container style="height: 500px">
            <span id="header">
                <span>
                    <button type="button" id="h_output" @click="output()" >退出登录</button>
<!--                    <el-button type="warning" round id="h_output" @click="output()">退出登录</el-button>-->
                </span>
            </span>
<!--            <el-header style="font-size: 15px;font-family: Helvetica Neue">欢迎"&nbsp;&nbsp;<span style="color: lightcyan">{{principal.mname}}</span>&nbsp;&nbsp;"来到 河南昆旅国际旅行社有限公司</el-header>-->
            <el-container style="height: 700px">
                <el-aside width="200px" style="background-color: rgb(238, 241, 246);height: 700px">
                    <el-menu
                        default-active="001"
                        :default-openeds="['1','2','3']"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        :router="true">
                        <el-submenu :index="one.id" v-for="one in menuList" :key="one.id">
                            <template slot="title">
                                <i :class="one.icon"></i>
                                <span v-text="one.name"></span>
                            </template>
                            <el-menu-item-group v-if="one.childNodes" :key="one.id">
                                <el-menu-item :index="two.id" :route="{name:two.url}" v-for="two in one.childNodes" :key="two.id">{{two.name}}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                    <el-footer style="height: 30px">@版权</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: 'Main',
        data () {
            return {
                menuList: [
                    {
                        id: '1',
                        name: '首   页',
                        icon: 'el-icon-s-home',
                        url: 'yyy',
                        childNodes: [
                            {id: '001', name: '首   页', url: 'yyy'},
                        ]
                    },
                    {
                        id: '2',
                        name: '基础管理',
                        icon: 'el-icon-s-tools',
                        url: '',
                        childNodes: [
                            {id: '002', name: '商品管理', url: 'product'},
                            {id: '003', name: '订单管理', url: 'order'},
                            {id: '004', name: '活动管理', url: 'activity'},
                        ]
                    },
                    {
                        id: '3',
                        name: '用户管理',
                        icon: 'el-icon-user',
                        url: '',
                        childNodes: [
                            {id: '005', name: '用户列表', url: 'traveller'},
                            {id: '006', name: '管理员列表', url: 'manager'},
                        ]
                    },
                ],
                // principal: localStorage.getItem('principal'),
                principal: JSON.parse(sessionStorage.getItem('principal'))
            }
        },
        methods: {
            output () {
                /*
                          页面进行传值的三种方法:
                          sessionStorage  临时存储，浏览器关闭数据清除
                          localStorage    本地存储，浏览器重启数据还在
                          this.$store     全局变量，刷新清除
                          */
                this.$router.replace('/login')
                sessionStorage.clear()
                localStorage.clear()
            }
        }
    }
</script>

<style scoped>
    #header
    {
        position: absolute;
        top: 10px;
        bottom: auto;
        left: -5px;
        width: 100%;
        height: 26px;
        overflow: hidden;
    }
    /* Header's buttons. */
    #header > span
    {
        float: right;
        width: 150px;
    }
    #header > span > button
    {
        position: absolute;
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-footer{
        line-height: 30px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }

    div > .el-container {
        margin-bottom: 20px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
